<template>
    <div v-show="isShow">
        <div class="weui-mask" id="iosMask" @click="hide"></div>
        <div class="weui-actionsheet weui-actionsheet_toggle"  id="iosActionsheet">
            <div class="weui-actionsheet__menu" v-if="getCart.length >0">
                <div class="weui-actionsheet__cell" v-for="item in getCart">
                    {{item.name}}-{{item.total}}
                    <span @click="addToCart(item.id)">+</span>
                    <span>{{item.quantity}}</span>
                    <span @click="removeToCart(item.id)">-</span>
                </div>
            </div>
            <div v-else>
                <div class="weui-actionsheet__cell">
                   请添加商品
                </div>
            </div>
            <div class="weui-actionsheet__action">
                <div class="weui-actionsheet__cell" id="iosActionsheetCancel" @click="hide">取消</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
              cartList: []
            }
        },
        props: {
            isShow: {
                required: true,
                type: Boolean
            }
        },
         computed: {
            getCart(){
                return this.$store.getters.getCartList
            }
        },
        methods:{
            hide(){
                 this.$emit('hide')
            },
            addToCart(e) {
                this.$store.dispatch('addToCart', {id: +e}).then().catch(()=>{
                    alert("库存不足");
                    return;
                })
            },
            removeToCart(e) {
                this.$store.dispatch('removeToCart', {id: +e});
            }
        }
    }
</script>
<style>

</style>